<template>
	<view style="width: 100%;">
		<view class="item" @click="showCalendar=!showCalendar">
			<u--input inputAlign="right" v-model="value" disabled disabledColor="transparent" :placeholder="placeholder"
				border="none"></u--input>
			<u-icon name="arrow-right"></u-icon>
		</view>

		<u-calendar :show="showCalendar"  @confirm="calendarConfirm" @close="calendarClose"
			v-bind="$attrs" :formatter="formatter"></u-calendar>
	</view>
</template>

<script>
	export default {
		name: 'smma-calendar',
		props: {
			placeholder: {
				type: String,
				default: '请选择'
			},
			value: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				showCalendar: false,
			}
		},
		methods: {
			close() {
				this.showCalendar = false
			},
			formatter(day) {
				const d = new Date()
				let month = d.getMonth() + 1
				const date = d.getDate()
				// if (day.month == month && day.day == date + 3) {
				// 	day.bottomInfo = '有优惠'
				// 	day.dot = true
				// }
				return day
			},
			calendarConfirm(e) {
				this.showCalendar = false
				if(e.length>1) {
					this.value = `${e[0]} / ${e[e.length - 1]}`
				} else {
					this.value = `${e[0]}`
				}
				this.$emit("input", this.value)
			},
		}
	}
</script>

<style scoped lang="scss">
	.item {
		display: flex;

		.u-input {
			pointer-events: none;
		}
	}
</style>